<template>
  <div class="c_config" :class="configShow
    ? 'animate__animated animate__bounceInLeft'
    : 'animate__animated animate__bounceOutLeft'
    " @click="close">
    <div class="box" @click.stop="stop">
      <el-header height="40px">
        <div class="left">
          <h3>配置项</h3>
          <span> 作者：947707134@qq.com</span>
        </div>
        <i class="boticon bot-close" @click="close"></i>
      </el-header>
      <el-form label-width="90px">
        <el-form-item label="触发字符">
          <div class="flex">
            <el-input :value="trigger" placeholder="默认是 #" maxlength="1" @input="changeValue($event, 'Set_Trigger')"
              style="margin-right: 20px"></el-input>
            <el-tag size="medium">
              <span>例如：</span>
              <span>{{ trigger || "#" }}tps、</span>
              <span>{{ trigger || "#" }}list</span>
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="RCON地址">
          <el-input :value="RconHost" placeholder="RCON地址; 支持域名" @input="changeValue($event, 'Set_RconHost')"></el-input>
        </el-form-item>
        <el-form-item label="管理员QQ">
          <el-input :value="master" placeholder="可用英文逗号隔开多个管理员" @input="changeValue($event, 'Set_Master')"></el-input>
        </el-form-item>
        <el-form-item label="指令白名单">
          <el-input v-model="whiteList" placeholder="指令之间用英文逗号隔开" @input="
            changeValue(
              whiteList.toLowerCase().split(','),
              'Set_WhiteCommandList'
            )
            "></el-input>
        </el-form-item>
        <el-form-item label="登录方式">
          <el-radio-group v-model="platformData" @change="changeValue(platformData, 'Set_Platform')">
            <div class="radio_box">
              <el-radio label="1">Android</el-radio>
              <el-radio label="2">aPad</el-radio>
              <el-radio label="3">Watch</el-radio>
              <el-radio label="4">iMac</el-radio>
              <el-radio label="5">iPad</el-radio>
              <el-radio label="6">Old Android</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "c_config",
  data() {
    return {
      configAnimate: false,
      whiteList: "",
      commandList: ["help", "list", "say", "tps", "gc", "baltop"],
      platformData: "2",
    };
  },
  computed: {
    ...mapGetters([
      "configShow",
      "trigger",
      "master",
      "whiteCommandList",
      "platform",
      "RconHost",
    ]),
  },
  watch: {
    configShow(ev) {
      if (ev) {
        this.configAnimate = true;
        setTimeout(() => {
          this.configAnimate = false;
        }, 1000);
      }
    },
    platform: {
      immediate: true,
      handler(ev) {
        this.platformData = ev;
      }
    }
  },
  mounted() {
    this.whiteList = this.whiteCommandList.join(",");
  },
  methods: {
    close() {
      // 等待动画结束允许关闭
      if (!this.configAnimate) {
        this.$store.dispatch("Set_ConfigShow", false);
      }
    },
    // 禁止点击
    stop() {
      return;
    },
    changeValue(ev, name) {
      this.$store.dispatch(name, ev);
    },
  },
};
</script>

<style lang="scss">
.c_config {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: transparent !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;

  .box {
    width: 420px;
    height: 320px;
    background: rgba($color: #fff, $alpha: 0.9);
    box-shadow: 0 0 6px rgba($color: #000, $alpha: 0.3);

    .el-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      margin-bottom: 10px;

      .left {
        display: flex;
        align-items: flex-end;

        span {
          font-size: 12px;
          color: #777;
          margin-left: 10px;
        }
      }

      .boticon {
        cursor: pointer;
      }
    }

    .radio_box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      .el-radio {
        margin-top: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>